<script setup lang="ts">
// import type {TitleListItem} from "@/pages/login-register/classes/TitleListItem";
import {onMounted} from "vue";

const props = withDefaults(
    defineProps<{
      // 是否隐藏当前标题
      isHidden: boolean,
      // 动画执行所需的周期时间，单位毫秒
      animDur: number,
      // 标题项
      titleItem: Object,
    }>(),
    {
      isHidden: false,
      animDur: 1000,
    }
)

// 组件每次挂载完成后，标题项出现的次数 +1
onMounted(() => {
  props.titleItem.appearCnt++
})
</script>

<template>
  <!-- 登陆注册页面的标题组件 -->
  <view class="lr-title">
    <view
        class="title"
        :class="[isHidden ? 'title-hidden' : 'title-appear']"

    >
      <!-- 主标题 -->
      <view class="title__main">{{ titleItem.title }}</view>
      <!-- 副标题 -->
      <view class="title__sub">{{ titleItem.subtitle }}</view>
    </view>
  </view>
</template>

<style scoped lang="scss">
// 登陆注册页面的标题组件
.lr-title {
  position: relative;
  width: 100%;
  height: 100%;

  .title {
    position: absolute;
    left: 9%;
    font-size: 32rpx;
    color: #ffffff;
    animation-duration: 1000ms;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;

    // 主标题
    .title__main {
      font-size: 2em;
    }

    // 副标题
    .title__sub {
      font-size: 1.5em;
    }
  }

  // 标题出现
  .title-appear {
    animation-name: titleAppear;
  }

  // 标题隐藏
  .title-hidden {
    animation-name: titleHidden;
  }
}

// 标题出现动画
@keyframes titleAppear {
  0% {
    top: 0;
    transform: translateY(-50%) scale(0);
  }
  80% {
    top: 30%;
    transform: translateY(-50%) scale(1.2);
  }
  100% {
    top: 30%;
    transform: translateY(-50%) scale(1);
  }
}

// 标题隐藏动画
@keyframes titleHidden {
  0% {
    top: 30%;
    transform: translateY(-50%) scale(1);
  }
  15% {
    top: 25%;
    transform: translateY(-50%) scale(1.15);
  }
  100% {
    top: 100%;
    transform: translateY(-50%) scale(0);
  }
}
</style>